<template>
  <el-card class="box-card messageCenter cardHover">
    <div class="text item el-box messageHeader">
      <div class="el-avatar el-box">
        <img src="@/assets/img/avatar.png">
        <p>宋茜</p>
        <span>共享业务服务部</span>
      </div>
      <div class="el-tile el-box" style="background-color: #E6F6FA;">
        <dt class="el-tile-title el-box">
          <p>未读邮件</p>
          <span class="numbers">26</span>
        </dt>
        <dd class="el-tile-icon"><img src="@/assets/img/tile-icon1.png"></dd>
      </div>
      <div class="el-tile el-box" style="background-color: #FDEEE2;">
        <dt class="el-tile-title el-box">
          <p>待办文件</p>
          <span class="numbers">336</span>
        </dt>
        <dd class="el-tile-icon"><img src="@/assets/img/tile-icon2.png"></dd>
      </div>
      <div class="el-tile el-box" style="background-color: #DDEFFF;" >
        <dt class="el-tile-title el-box">
          <p>待阅文件</p>
          <span class="numbers">78</span>
        </dt>
        <dd class="el-tile-icon"><img src="@/assets/img/tile-icon3.png"></dd>
      </div>
    </div>
    <i @click="handDelProject" class="el-icon-close closeIcon"></i>
  </el-card>
</template>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    // 删除任意一个布局里的项目
    handDelProject () {
      this.$emit('handDelProject')
    },
  }
}
</script>
<style lang="scss">
.messageCenter {
  padding: 0 10px;
  margin-bottom: 10px;
  position: relative;
  left: 0;
  top: 0;
  .closeIcon {
    position: absolute;
    right: 0;
    top: 0;
    padding: 3px;
    border-radius: 50%;
    background-color: #eeeeee;
    display: none;
  }
  .el-avatar {
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #303133;
    background-color: #cccccc;
    padding: 10px;
    img {
      width: 70px;
      height: 70px;
    }
    p {
      font-size: 13px;
      margin: -8px 0 -10px 0;
    }
    span {
      font-size: 15px;
    }
  }
  .el-tile {
    width: 100%;
    justify-content: space-around;
    align-items: center;
    margin-left: 10px;
    padding: 12px 10px;
    .el-tile-title {
      color: #303133;
      align-items: center;
      flex-direction: column;
      p {
        font-size: 16px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
      .numbers {
        font-size: 30px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
      }
    }
    .el-tile-icon {
      padding-left: 10px;
      img {
        width: 60px;
        height: 60px;
      }
    }
  }
}
.cardHover {
  &:hover {
    background-color: rgba(254,227,78,.1);
    border: 1px dashed #fb9c68;
    .closeIcon {
      display: block;
    }
  }
}
</style>